<template>
  <div class="search-bar">
    <el-card>
      <el-row :gutter="24">
        <el-col :span="10">
          <div class="grid-content">
            <div class="grid-content-title">检测日期:</div>
            <el-date-picker
              v-model="date"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="chooseTimeRange"
              type="datetimerange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content">
            <div class="grid-content-title">分类:</div>
            <!--  -->
            <el-select
              v-model="searchData.type"
              placeholder="请选择"
              @change="chooseTypes"
              clearable
            >
              <el-option
                v-for="item in searchByTypedata"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content">
            <div class="grid-content-title">关键词:</div>
            <!-- 输入搜索框带提示 -->
            <el-autocomplete
              class="inline-input"
              v-model="gridContent"
              :fetch-suggestions="querySearch"
              placeholder="请输入检测名称"
              :trigger-on-focus="false"
              @select="handleSelect"
              clearable
              @input="keywordSearch"
            >
            </el-autocomplete>
            <!-- <el-button type="primary" icon="el-icon-search" @click="searchDevice" size="small"></el-button>   -->
            <!-- <el-button type="info" plain icon="el-icon-search"  @click="keywordSearch"></el-button> -->
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  // 1. name
  // 2. components
  // 3. props
  // 4. data
  // 5. computed
  // 6. watch
  // 7. created
  // 8. mounted
  // 9. update
  // 10. beforeRouteUpdate
  // 11. methods
  name: "OperationsSearchBar",
  // 分类搜索
  props: {
    searchByTypedata: {},
    searchData: {},
  },
  data() {
    return {
      //   时间选择器
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近半年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 分类搜索类别
      Typedata: {},
      date: "",
      // 输入框带提示
      restaurants: [],
      gridContent: "",
      searchByTypeProps: {
        // multiple: true,
        expandTrigger: "hover",
      },
    };
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
  methods: {
    // 输出时间选择器选择时间
    chooseTimeRange(t) {
      // console.log(t);//结果为一个数组，如：["2018-08-04", "2018-08-06"]
      this.$emit("getDataBySelectTime", t);
    },
    // 输出分类选择器选择的分类
    chooseTypes(type) {
      // console.log(type);
      this.$emit("getDataBySelectType", type);
    },
    // 输出关键词输入框
    keywordSearch() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.$emit("getDataByKeyword", this.gridContent);
      }, 500);
    },
    // 清空框内信息
    // clearInput() {
    //   this.gridContent="";
    //   this.$emit('getDataByKeyword', this.gridContent)
    // },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    // 搜索关键字
    loadAll() {
      return [
        {
          value: "周秋生",
        },
        {
          value: "陈桂文",
        },
        {
          value: "曹正华",
        },
        {
          value: "陈美娟",
        },
        {
          value: "张文强",
        },
        {
          value: "吴玉弟",
        },
        {
          value: "-",
        },
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
  },
  watch: {
    searchByTypedata: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.Typedata = newVal;
        }
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style>
.el-col {
  border-radius: 4px;
}

.grid-content {
  /* // border-radius: 4px; */
  min-height: 36px;
}

.grid-content-title {
  font-weight: 500;
  font-size: 14px;
  /* padding-left: 5px; */
  padding: 8px;
  cursor: default;
}

/* 日期选择框的宽度 */
/* .el-date-editor.el-input, .el-date-editor.el-input__inner {
      width: 390px;
  } */
</style>
